<template>
  <div class="concat-page">
    <div class="left-menu">
        <ul>
            <li @click="goRouter(item.path)" v-for="item in menuList" :key="item.id">{{ item.name }}</li>
        </ul>
    </div>
    <div class="right-main-content">
        <RouterView />
    </div>
  </div>
</template>
<script setup lang="ts" name="ConcatPage">
import {reactive} from "vue";
import { useRouter } from 'vue-router';

const router = useRouter();

const menuList = reactive([
    {
        id: '01',
        name: 'props实现父子通信',
        path: '/concat/propsConcat'
    },
    {
        id: '02',
        name: '自定义事件',
        path: '/concat/customEvent'
    },
    {
        id: '03',
        name: 'mitt',
        path: '/concat/mitt'
    },
    {
        id: '04',
        name: 'attrs',
        path: '/concat/attrs'
    },
    {
        id: '05',
        name: 'refAndParent',
        path: '/concat/refAndParent'
    },
    {
        id: '06',
        name: 'inject、provide',
        path: '/concat/privderAndInject'
    }
])

function goRouter(path:string){
    router.push(path);
}

</script>
<style  scoped>
.concat-page{
    padding: 20px;
    display: flex;
}

.left-menu{
    width: 300px;
    height: 500px;
    background: pink;
}

ul li {
    line-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color:#fff;
}

.right-main-content{
    flex: 1;
    margin-left: 20px;
    border: 1px solid #999;
}
</style>
